<template>
  <j-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <a-row :gutter="24">
          <a-form-model-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="title"
            label="卷类型标题"
            style="margin-left: -68px"
          >
            <a-input placeholder="请输入卷类型标题" v-model="model.preferentialName" />
          </a-form-model-item>
        </a-row>

        <a-row :gutter="24">
          <a-form-model-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="title"
            label="券标题"
            style="margin-left: -68px"
          >
            <a-input placeholder="请输入券标题" v-model="model.title" />
          </a-form-model-item>
        </a-row>
        <!-- <a-row :gutter="24">
          <a-form-model-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="serverIds"
            label="指定服务id"
            style="margin-left: -68px"
          >
            <a-input placeholder="请输入指定服务id" v-model="model.serverIds" />
          </a-form-model-item>
        </a-row> -->
        <a-row :gutter="24">
          <a-form-model-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="preferentialType"
            label="优惠券类型"
            style="margin-left: -68px"
          >
            <a-select
              v-model="model.preferentialType"
              style="width: 100%"
              :options="options"
              allowClear
              placeholder="请选择"
              @change="$envet => preferentialTypeClick($envet)"
            />
          </a-form-model-item>
        </a-row>
        <a-row :gutter="24">
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isNew" label="是否新人优惠卷">
          <a-switch v-model="isNewFlag" @change="isNewClick()" />
        </a-form-model-item>
        </a-row>
        <a-row :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
          <a-col :span="12"
            ><a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="minimumAmount"
              label="最低消费金额"
              style="margin-right: -90px"
            >
              <a-input-number v-model="model.minimumAmount" :min="0" :precision="2" :defaultValue="0" />
              <span> 元</span></a-form-model-item
            ></a-col
          >
          <a-col :span="12">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="preferentialAmount" label="优惠金额">
              <a-input-number v-model="model.preferentialAmount" :min="0" :precision="2" :defaultValue="0" /><span>
                元</span
              >
            </a-form-model-item></a-col
          >
        </a-row>
        <a-row :gutter="24">

        <!--        <a-row :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">-->
<!--          <a-col :span="12">-->
<!--            <a-form-model-item-->
<!--              :labelCol="labelCol"-->
<!--              :wrapperCol="wrapperCol"-->
<!--              prop="status"-->
<!--              label="状态"-->
<!--              style="margin-right: -90px"-->
<!--            >-->
<!--              <a-switch v-model="statusFlag" /> </a-form-model-item-->
<!--          ></a-col>-->
          <a-col :span="12">
            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="endDays"
              label="到期天数"
              v-if="model.preferentialType == 3"
            >
              <a-input-number v-model="model.endDays" :min="0" :precision="2" :defaultValue="0" /> </a-form-model-item
          ></a-col>
        </a-row>
        <a-row :gutter="24">
          <a-form-model-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="startTime"
            label="开始使用时间"
            style="margin-left: -68px"
          >
            <a-date-picker showTime valueFormat="YYYY-MM-DD HH:mm:ss" v-model="model.startTime" />
          </a-form-model-item>
        </a-row>
        <a-row :gutter="24" v-if="model.preferentialType == 2">
          <a-form-model-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="endTime"
            label="到期时间"
            style="margin-left: -68px"
          >
            <a-date-picker showTime valueFormat="YYYY-MM-DD HH:mm:ss" v-model="model.endTime" />
          </a-form-model-item>
        </a-row>
      </a-form-model>
    </a-spin>
  </j-modal>
</template>

<script>
import { httpAction } from '@/api/manage'
import moment from 'moment'

export default {
  name: 'XhdjPreferentialCertificateModal',
  data () {
    return {
      title: '操作',
      visible: false,
      statusFlag: false,
      isNewFlag: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      options: [
        {
          value: '1',
          label: '不限日期'
        },
        {
          value: '2',
          label: '指定到期时间'
        },
        {
          value: '3',
          label: '领取后计算到期时间'
        }
      ],
      confirmLoading: false,
      validatorRules: {
        title: [{ required: true, message: '请输入标题' }],
        minimumAmount: [{ required: true, message: '请输入最低优惠金额' }],
        preferentialAmount: [{ required: true, message: '请输入最低优惠金额' }],
        preferentialType: [{ required: true, message: '请选择优惠券' }],
        startTime: [{ required: true, message: '请选择开始时间' }],
        endTime: [{ required: true, message: '请选择结束时间' }],
        endDays: [{ required: true, message: '请输入到期天数' }]
      },
      url: {
        add: '/xhdjPreferentialCertificate/add',
        edit: '/xhdjPreferentialCertificate/edit'
      }
    }
  },
  created () {},
  methods: {
    add () {
      //初始化默认值
      this.edit({})
    },
    edit (record) {
      this.model = Object.assign({}, record)
      this.visible = true
      this.isNewFlag = this.model.isNew===1
    },
    // 状态
    statusClick () {
      if (this.statusFlag) {
        this.model.status = 1
      } else {
        this.model.status = 0
      }
    },
    isNewClick () {
      if (this.isNewFlag) {
        this.model.isNew = 1
      } else {
        this.model.isNew = 0
      }
    },
    close () {
      this.$emit('close')
      this.visible = false
      this.$refs.form.clearValidate()
    },
    handleOk () {
      const that = this
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          httpAction(httpurl, this.model, method)
            .then(res => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              that.close()
            })
        } else {
          return false
        }
      })
    },
    handleCancel () {
      this.close()
    }
  }
}
</script>

<style lang="less" scoped></style>
